<template>
    <div>
        <!-- 竖着的每一个小组件 -->
        <ul id="upright">
            <li v-for="item in recommend" :key='item.id' @click="goargainDetails(item.id)">
                <img :src="item.pic" alt="">
                <p class="upright-top">{{item.name}}</p>
                <p class="upright-bum">{{item.characteristic}}</p>
                <p class="span">￥{{item.minPrice}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'wgy-One-Upright',
    props:{
        recommend:{
            type:Array,
            defalut:() => {
                return []
            }
        }
    },
    data() {
        return {

        };
    },
    created() {

    },
    methods: {
         goargainDetails(id) {
            this.$router.push({
                path:"/argainDetails",
                query:{
                    id
                }
            })
        }

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#upright{
    background-color: #fff;
    width: 100%;
    padding-right: .2rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: .2rem;
    li{
        width: 48%;
        margin-left: .1rem;
        height:6rem;
        background-color: #fff;
        img{
            width: 100%;
            height: 75%;
        }
        .upright-top{
            font-size: .34rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .upright-bum{
            font-size: .24rem;
            color: #aaa;
            margin: .1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .span{
            color: red;
            font-size: .3rem;
        }
    }
}
</style>
